<template>
    <div class="itembox">
        <el-row class="TaskDataTitle">
            <el-col :span="24">
                <span style="margin-left:25px;">数据展示</span>
            </el-col>
        </el-row>
        <div class="itembox-content">
            <div class="grid-content bg-purple itmeborder">
                <div class="dataimg">
                    <img src="../img/renwuzongshu@3x.png" alt="">
                </div>

                <ul class="pricebox">
                    <li class="payicon">任务总数</li>
                    <li class="pricenum">50</li>
                </ul>

            </div>

            <div class="grid-content bg-purple-light itmeborder">
                <div class="dataimg">
                    <img src="../img/yiwancrenwu@3x.png" alt="" >
                </div>
                <ul class="pricebox">
                    <li class="payicon">已完成任务</li>
                    <li class="pricenum">10</li>
                </ul>

            </div>

            <div class="grid-content bg-purple itmeborder">
                <div class="dataimg">
                    <img src="../img/jinxingzrw@.png" alt="" >
                </div>
                <ul class="pricebox">
                    <li class="payicon">进行中的任务</li>
                    <li class="pricenum">40</li>
                </ul>
            </div>
            <div class="grid-content bg-purple-light itmeborder clearline">
                <div class="dataimg">
                    <img src="../img/renwuchaos@3x.png" alt="" >
                </div>
                <ul class="pricebox">
                    <li class="payicon">超时任务</li>
                    <li class="pricenum">0</li>
                </ul>
            </div>
        </div>

    </div>
</template>
<script>

    export default {
        data() {
            return {}
        },
        mounted() {
        },
        methods: {}
    }
</script>
<style lang="less" scoped>
    .itembox {
        margin: 0 10px;
        margin-top: 14px;
        height: 180px;
        background: #fff;

        .TaskDataTitle {
            height: 43px;
            line-height: 43px;
            font-size: 16px;
            color: black;
            /*overflow: hidden;*/
            border-bottom: 2px solid #FAFAFA;
        }
        .itembox-content{
            display: flex;
            justify-content: space-around;
            .itmeborder {
                height: 100px;
                padding: 0 40px;
                display: flex;

                .pricebox {
                    margin-left: 8px;
                    margin-top: 50px;
                    .payicon {
                        font-size: 16px;
                        color: #9B9B9B;

                    }
                    .pricenum {
                        font-size: 16px;
                        color: black;
                        margin-top: 3px;
                    }

                }
                .dataimg {
                    width: 72px;
                    height: 72px;
                    margin-top: 30px;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }

    }
    @media screen and (max-width: 1430px) {
        .itembox {
            margin: 0 10px;
            margin-top: 14px;
            height: 180px;
            background: #fff;
            .itembox-content{
                display: flex;
                justify-content: space-around;
                .itmeborder {
                    height: 100px;
                    padding: 0 40px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    .pricebox {
                        margin-left: 0px;
                        margin-top: 0px;
                        text-align: center;
                        .payicon {
                            font-size: 14px;
                            color: #9B9B9B;

                        }
                        .pricenum {
                            font-size: 16px;
                            color: black;
                            margin-top: 3px;
                        }

                    }
                    .dataimg {
                        width: 60px;
                        height: 60px;
                        margin-top: 20px;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }

        }
    }
</style>

